<template>
  <div class="container">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      row-key="orderNumber"
    >
      <template slot="orderStatus" slot-scope="text">
        <span :style="{color:orderStatusMap[text].color}">{{ orderStatusMap[text].text }}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
import { columns } from './dict.js'

export default {
  data () {
    return {
      columns,
      data: [],
      orderStatusMap: {
        1: { text: '待付款', color: '#444693' },
        2: { text: '待发货', color: '#5f3c23' },
        3: { text: '待收货', color: '#1d953f' },
        4: { text: '待评价', color: '#aa2116' },
        5: { text: '已完成', color: '#f47920' }
      }
    }
  },

  created () {
    for (let i = 1; i < 6; i++) {
      this.data.push({
        orderNumber: i,
        customerNickName: { 1: '小明', 2: '小华', 3: '小李', 4: '小陈', 5: '小张' }[i],
        goodsName: { 1: '苹果', 2: '梨', 3: '西瓜', 4: '菠萝', 5: '荔枝' }[i],
        unitPrice: { 1: 2, 2: 4, 3: 6, 4: 8, 5: 10 }[i],
        purchaseQuantity: { 1: 20, 2: 40, 3: 60, 4: 80, 5: 100 }[i],
        totalPrice: { 1: 40, 2: 160, 3: 360, 4: 640, 5: 1000 }[i],
        orderStatus: i
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: white;
  overflow-y: auto;
}

.container::-webkit-scrollbar{
  width: 4px;
  height: 4px;
}

.container::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: #efefef;
}

.container::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #ccc;
}
</style>
